import React from "react";
import './login.css'
import './reset.css'
export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            account: '',
            password: '',
            focushandle:false,
            blurhandle:false,
            show:false,
            zimu:false,
            show1:false,
            mima:false,

            fomihandle:false,
            bumihandle:false,
        }
    }
    componentDidMount() {
        this.clk()
    }
    clk() {
        if(/^[a-z]{10}[0-9]{3}$/.test(this.state.account)&&/^[0-9]{6}$/.test(this.state.password)){
            this.$axios
            .post("https://apipc-xiaotuxian-front.itheima.net/login", {
                account: this.state.account,
                password: this.state.password,
            })
            .then((res) => {
                console.log(res);
                if (res.data.msg == "操作成功") {
                    window.localStorage.setItem('login', res.data.result.token)
                    window.localStorage.setItem('account', res.data.result.account)
                    window.location.href = '/'
                }
            });
        }
    }
    acco(e) {
        this.setState({
            account: e.target.value
        })
    }
    pass(e) {
        this.setState({
            password: e.target.value
        })
    }
    forceUpdate(){
        if( this.state.account==''){
            this.setState({
                focushandle:true,
                blurhandle:false,
                show:false
            })
        }else{
            this.setState({
                zimu:false,
                focushandle:true,
                blurhandle:false,
            })
        }
      
    }
    blurs(){
        if(this.state.account==''){
            this.setState({
                focushandle:false,
                blurhandle:true,
                show:true
            })
        }else{
            this.setState({
                zimu:true,
                blurhandle:true,
                focushandle:false,
            })
            if(/^[a-z]{10}[0-9]{3}$/.test(this.state.account)){
                this.setState({
                    zimu:false,
                    blurhandle:false,
                })
            }
        }    
    }
    fo1(){
        if( this.state.password==''){
            this.setState({
                fomihandle:true,
                bumihandle:false,
                show1:false
            })
        }else{
            this.setState({
                mima:false,
                fomihandle:true,
                bumihandle:false,
            })
        }
    }
    bu1(){
        if(this.state.password==''){
            this.setState({
                fomihandle:false,
                bumihandle:true,
                show1:true
            })
        }else{
            this.setState({
                mima:true,
                bumihandle:true,
                fomihandle:false,
            })
            if(/^[0-9]{6}$/.test(this.state.password)){
                this.setState({
                    mima:false,
                    bumihandle:false,
                })
            }
        }    
    }
    render() {
        return <div>
            <div data-v-37dfd6fc="" id="app">
                <header data-v-37dfd6fc="" className="login-header">
                    <div data-v-37dfd6fc="" className="commonwidth">
                        <h1 data-v-37dfd6fc="" className="logo">
                            <a data-v-37dfd6fc="" href="#!">小兔鲜</a>
                        </h1>
                        <h3 data-v-37dfd6fc="" className="sub">欢迎登录</h3>
                        <a data-v-37dfd6fc="" href="/#/" className="entry">
                            进入网站首页
                            <i data-v-37dfd6fc="" className="iconfont icon-angle-right"></i>
                            <i data-v-37dfd6fc="" className="iconfont icon-angle-right"></i></a>
                    </div>
                </header>
                <section data-v-37dfd6fc="" className="login-section">
                    <div data-v-37dfd6fc="" className="wrapper">
                        <nav data-v-37dfd6fc="">
                            账户登录
                        </nav>
                        <div data-v-37dfd6fc="" className="account-box">
                            <div data-v-37dfd6fc="" className="toggle">
                                <i data-v-37dfd6fc="" className="iconfont icon-envelope-o"></i>
                                使用短信登录

                            </div>
                            <form data-v-37dfd6fc=""
                                noValidate="noValidate"
                                autoComplete="off" className="form">
                                <div data-v-37dfd6fc="" className="form-item">
                                    <div data-v-37dfd6fc="" className="input">
                                        <i data-v-37dfd6fc="" className="iconfont icon-user-o"></i
                                        ><input data-v-37dfd6fc=""
                                            type="text"
                                            placeholder="请输入用户名"
                                            name="account" value={this.state.account} 
                                            onChange={this.acco.bind(this)}
                                            onFocus={this.forceUpdate.bind(this)}
                                            onBlur={this.blurs.bind(this)}
                                            className={`${this.state.focushandle?'foo':''} ${this.state.blurhandle?'blu':''}` }
                                            />
                                    </div>
                                    {this.state.show&&<div className="error" data-v-7453d80e="">
                                        <i className="iconfont icon-warning" data-v-7453d80e=""></i> 请输入用户名
                                    </div>}
                                    {this.state.zimu&&<div className="error" data-v-7453d80e="">
                                        <i className="iconfont icon-warning" data-v-7453d80e=""></i> 字母开头且6-20个字符
                                    </div>}
                                </div>
                                <div data-v-37dfd6fc="" className="form-item">
                                    <div data-v-37dfd6fc="" className="input">
                                        <i data-v-37dfd6fc="" className="iconfont icon-lock8"></i
                                        ><input
                                            data-v-37dfd6fc=""
                                            type="password"
                                            placeholder="请输入密码"
                                            name="password" value={this.state.password}
                                             onChange={this.pass.bind(this)} 
                                            onFocus={this.fo1.bind(this)} 
                                            onBlur={this.bu1.bind(this)}
                                            className={`${this.state.fomihandle?'foo':''} ${this.state.bumihandle?'blu':''}` }
                                             />
                                    </div>
                                    {this.state.show1&&<div className="error" data-v-7453d80e="">
                                        <i className="iconfont icon-warning" data-v-7453d80e=""></i>  请输入密码
                                    </div>}
                                    {this.state.mima&&<div className="error" data-v-7453d80e="">
                                        <i className="iconfont icon-warning" data-v-7453d80e=""></i>  密码6-24个字符
                                    </div>}
                                </div>
                                <div data-v-37dfd6fc="" className="form-item">
                                    <div data-v-37dfd6fc="" className="agree">
                                        <span data-v-37dfd6fc="">我已同意</span>《隐私条款》<span data-v-37dfd6fc="">和</span>《服务条款》
                                    </div>
                                </div>
                                <div className="btn" onClick={this.clk.bind(this)}>登录</div>
                            </form>
                            <div data-v-37dfd6fc="" className="action">
                                <a data-v-37dfd6fc=""
                                    href="https://graph.qq.com/oauth2.0/authorize?client_id=101941968&amp;response_type=token&amp;scope=all&amp;redirect_uri=http%3A%2F%2Ferabbit.itheima.net%2F%23%2Flogin%2Fcallback"><img
                                        data-v-37dfd6fc=""
                                        src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"
                                        alt="" /></a>
                                <div data-v-37dfd6fc="" className="url">
                                    忘记密码免费注册
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <footer data-v-37dfd6fc="" className="login-footer">
                    <div data-v-37dfd6fc="" className="commonwidth">
                        <p data-v-37dfd6fc="">
                            <a data-v-37dfd6fc="" href="#!">关于我们</a
                            ><a data-v-37dfd6fc="" href="#!">帮助中心</a
                            ><a data-v-37dfd6fc="" href="#!">售后服务</a
                            ><a data-v-37dfd6fc="" href="#!">配送与验收</a
                            ><a data-v-37dfd6fc="" href="#!">商务合作</a
                            ><a data-v-37dfd6fc="" href="#!">搜索推荐</a
                            ><a data-v-37dfd6fc="" href="#!">友情链接</a>
                        </p>
                        <p data-v-37dfd6fc="">CopyRight © 小兔鲜儿</p>
                    </div>
                </footer>
            </div>
        </div>
    }
}